import React from "react";
import cs from 'classnames';



import { useRef } from "react";
import { memo } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { useEffect } from "react";
import { PAGE_SIZE } from './constans'
import { changeCurrentIdAction, getCategoryIconListAction } from '../../store/actionCreators'
import { Carousel } from "antd";
import sty from './sty.module.css';


const DjRadioCategory = () => {
  const bannerRef = useRef(null);

  const { currentId, categories } = useSelector(state => ({
    currentId: state.getIn(['djradio', 'currentId']),
    categories: state.getIn(['djradio', 'categories'])
  }), shallowEqual)
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getCategoryIconListAction())
  }, [dispatch])

  const page = Math.ceil(categories.length / PAGE_SIZE);




  return <div className={sty.categoryWrap}>
    <div className={cs(sty.arrow, 'djradio_sprite', sty.arrowLeft)} onClick={() => bannerRef.current.prev()}></div>
    <div className={sty.content}>
      <Carousel dots={{ className: 'dj-dots' }} ref={bannerRef} >
        {
          Array(page).fill(0).map((item, i) => {
            return <ul className={sty.categoryPage} key={i}>
              {
                categories.slice(i * PAGE_SIZE, (i + 1) * PAGE_SIZE).map((v) => <li key={v.id}
                  className={cs(sty.categoryItem, { 'c-active': currentId === v.id })}
                  onClick={() => Number(v.id) && dispatch(changeCurrentIdAction(v.id))}
                >
                  <p className={sty.image} style={{ background: `url(${v.picWebUrl})` }}></p>
                  <em>{v.name}</em>
                </li>)
              }
            </ul>
          })
        }
      </Carousel>
    </div>
    <div className={cs(sty.arrow, 'djradio_sprite', sty.arrowRight)} onClick={() => bannerRef.current.next()}></div>
  </div>
}
export default memo(DjRadioCategory)